import { useState } from "react";
import { useNavigate } from "react-router-dom";
import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";

import "./index.scss";

const Record = () => {
  const [IsAcitve, setIsAcitve] = useState(0);

  const navigate = useNavigate();

  /**
   * 返回上一页
   */
  function handleGoBack() {
    navigate(-1); // 或者使用 history.go(-1)
  }

  /**
   * 表单类别切换
   */
  const tabActive = (num: number) => {
    setIsAcitve(num);
  };

  // 列表数据
  const listData = [] as any;

  for (let i = 1; i < 30; i++) {
    const ran = Math.floor(Math.random() * 2);
    listData.push({
      id: i,
      name: ran == 0 ? "算力收入" : "(赎回钻石)ZS",
      datetime: "2024-12-01  12:00",
      type: ran,
      power: Math.floor(Math.random() * 100),
    });
  }

  return (
    <div className="record-container">
      <div className="record-inner">
        <div className="tab-box">
          <div
            className={IsAcitve == 0 ? "item active" : "item"}
            onClick={() => {
              tabActive(0);
            }}
          >
            全部
          </div>
          <div
            className={IsAcitve == 1 ? "item active" : "item"}
            onClick={() => {
              tabActive(1);
            }}
          >
            算力
          </div>
          <div
            className={IsAcitve == 2 ? "item active" : "item"}
            onClick={() => {
              tabActive(2);
            }}
          >
            钻石(ZS)
          </div>
        </div>
        {/* 列表 */}
        <div className="record-list">
          <ul>
            {listData.map((item: any) => (
              <li key={item.id} className="item">
                <div className="item-box">
                  <div className="left-box">
                    <div className="name">{item.name}</div>
                    <div className="datetime">{item.datetime}</div>
                  </div>
                  <div
                    className={
                      item.type == 0 ? "right-box power" : "right-box zs"
                    }
                  >
                    +{item.power}
                    {item.type == 0 ? "算力" : "ZS"}
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
      {/* 返回 */}
      <div className="bottom-box">
        <div className="return-back-btn" onClick={handleGoBack}>
          <KeyboardBackspaceIcon />
          <span>返回</span>
        </div>
      </div>
    </div>
  );
};
export default Record;
